import { nextTick, onMounted, reactive, ref } from "vue";
import type { ListCategoryParm } from "../../api/category/CategoryModel";
import { getListApi } from "@/api/category";

export default function useTable() {
    // 表格高度
    const tableHeight=ref(0)
    // 列表查询的参数
    const listParm=reactive<ListCategoryParm>({
        currentPage:1,
        pageSize:10,
        categoryName:"",
        total:0
    })
    // 表格数据
    const tableList=ref([])
    // 列表查询
    const getList=async()=>{
        let res=await getListApi(listParm)
       if(res&&res.code==200){
          tableList.value=res.data.records;
          listParm.total=res.data.total;
       }
    }
    // 搜索
    const searchBtn=()=>{
        getList()
    }
    // 重置
    const resetBtn=()=>{
        listParm.currentPage=1;
        listParm.categoryName="";
        getList()
    }
    // 页容量改变时触发
    const sizeChange=(size:number)=>{
        listParm.pageSize=size;
  
        getList()
    }
    // 当前页改变时触发
    const currentChange=(page:number)=>{
        listParm.currentPage=page;
        getList()
    }
    onMounted(()=>{
        getList()
        nextTick(()=>{
            tableHeight.value=window.innerHeight-200
        })
    })
    return {
        listParm,
        getList,
        searchBtn,
        resetBtn,
        tableList,
        sizeChange,
        currentChange,
        tableHeight
    }
}